<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
</head>
<body>
    
    <input type="button" value="获取数据GET" id="btnGet">
    <input type="button" value="操作数据POST" id="btnPost">

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        //发送GET请求
        // document.querySelector('#btnGet').addEventListener('click', () => {
        //     //axios发起异步请求
        //     axios({
        //         url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
        //         method: 'GET'
        //     }).then((result) => { //成功回调函数
        //         console.log(result.data);
        //     }).catch((err) => { //失败回调函数
        //         console.log(err);
        //     })
        // })
        document.querySelector('#btnGet').addEventListener('click', () => {axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => { //成功回调函数
            console.log(result.data);}).catch((err) => { //失败回调函数
            console.log(err);}
            )})
        
        //发送POST请求
        // document.querySelector('#btnPost').addEventListener('click', () => {
        //     //axios发起异步请求
        //     axios({
        //         url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
        //         method: 'POST',
        //         data: 'id=1' //POST请求方式 , 请求体
        //     }).then((result) => { //成功回调函数
        //         console.log(result.data);
        //     }).catch((err) => { //失败回调函数
        //         console.log(err);
        //     })
        // })
        document.querySelector('#btnPost').addEventListener('click', () => {axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update', 'id=1').then((result) => { //成功回调函数
            console.log(result.data);}).catch((err) => { //失败回调函数
            console.log(err);})})
    
    </script>
</body>
</html>